<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <title>Document</title>
    <style>
        body {
            padding: 10px;
        }

        .row [class^=col-] {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: #eee;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>
<h1>你好，世界！111111</h1>

<div class="container-fluid ">
    <!-- 实例：移动设备和桌面屏幕 -->
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
    </div>
    <hr>
    <!-- 实例：手机、平板、桌面 -->
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>
    <hr>
    <!-- 多余的列（column）将另起一行排列 -->
    <div class="row">
        <div class="col-xs-9">.col-xs-9</div>
        <div class="col-xs-4">.col-xs-4
            <br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
        </div>
        <div class="col-xs-6">.col-xs-6
            <br>Subsequent columns continue along the new line.
        </div>
    </div>
    <hr>
    <!-- 响应式列重置 -->
    <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3
            asdasdasd
            <br>
            asdad
        </div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>
    <br>
    <!-- 列偏移-->
    <!--.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。-->
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>
    <!--嵌套列-->
    <div class="row">
        <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
                <div class="col-xs-8 col-sm-6">
                    Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                    Level 2: .col-xs-4 .col-sm-6
                </div>
            </div>
        </div>
    </div>
    <!-- 列排序-->
    <div class="row">
        <div class="col-md-6 col-md-push-6">.col-md-9 .col-md-push-1</div>
        <div class="col-md-6 col-md-pull-6">.col-md-9 .col-md-push-2</div>
    </div>
</div>
<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<p>Nullam quis risus eget urna mollis ornare vel eu leo. </p>

<p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. </p>

<p>You can use the mark tag to
    <mark>highlight</mark>
    text.
</p>
<del>This line of text is meant to be treated as deleted text.</del>
<br>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
<br>
<u>This line of text will render as underlined</u>
<br>
<strong>rendered as bold text</strong>
<br>
<em>rendered as italicized text</em>
<br>

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>
<br>
<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
</address>

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ol>
    <li>sadd</li>
    <li>asdasd</li>
    <li>asdasdasd</li>
    <li>asdasdas</li>
    <li>asdasdasd</li>
</ol>

<ul class="list-inline">
    <li>asasd</li>
    <li>asasdasasdas</li>
    <li>asdasd56566</li>
</ul>
<dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
</dl>
<dl class="dl-horizontal">
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
</dl>
<p>
    For example, <code>&lt;section&gt;</code> should be wrapped as inline. <br>
    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
<var>y</var> = <var>m</var><var>x</var> + <var>b</var> <br>
<samp>This text is meant to be treated as sample output from a computer program.</samp>
<table class="table table-striped">
    <caption>Optional table caption.</caption>
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>
